<template>
  <div class="shop">
    <Navi :title="'电影演出影院'" :flexd="true" />
    <div class="nav" :style="{ backgroundColor: movie.backgroundColor }">
      <div @click="goDetails(movie.id, movie.globalReleased)">
        <div class="tbox">
          <div class="timg">
            <img class="auto-img himg" :src="movie.img" alt="" />
          </div>
          <div class="nmbox">
            <div class="nm one-text">{{ movie.nm }}</div>
            <div class="enm one-text">{{ movie.enm }}</div>
            <div class="fbox">
              <div class="fen">{{ movie.sc }}</div>
              <div class="ren">({{ movie.snum }})</div>
            </div>
            <div class="cat">{{ movie.cat }}</div>
            <div class="desc">{{ movie.src }}/{{ movie.dur }}分钟</div>
            <div class="pubdesc">{{ movie.pubDesc }}</div>
          </div>
        </div>
        <div class="play">
          <van-icon color="#ddd" size="20" name="share-o" />
        </div>
      </div>

      <div class="btn">
        <div class="like" @click="like()"><van-icon name="like-o" /> 想看</div>
        <div class="star" @click="star()"><van-icon name="star-o" /> 看过</div>
      </div>
    </div>
    <div class="list">
      <van-tabs v-model="active" :title-active-color="'#FA2900'" @change="chan">
        <van-tab
          v-for="(item, index) in date"
          :key="index"
          :title="item.split('-')[1] + '月' + item.split('-')[2] + '日'"
        >
          <div class="navbox">
            <van-dropdown-menu active-color="#fa2900">
              <van-dropdown-item
                v-model="value1"
                @change="getID()"
                :options="district"
              />
            </van-dropdown-menu>
          </div>
        </van-tab>

        <div class="xuan">
          <div
            class="item"
            ref="item"
            v-for="(item, index) in dian"
            :key="index"
            v-show="isHas"
            @click="
              goCinema(item.id, cityid, item.addr, item.name, date1[active])
            "
          >
            <div class="tbox">
              <div class="title one-text">{{ item.name }}</div>
              <div class="tsum">
                {{ item.sellPrice }}<span class="yuan">元</span
                ><span class="qi">起</span>
              </div>
            </div>
            <div class="dbox">
              <div class="dtitle one-text">{{ item.addr }}</div>
              <div class="dsum">{{ item.distance }}</div>
            </div>
            <div class="zhe">
              <div
                class="tui"
                :style="{ color: e.color, borderColor: e.color }"
                v-for="(e, i) in labels[index]"
                :key="i"
              >
                {{ e.name }}
              </div>
            </div>
            <div class="youhui">
              <div class="yimg">
                <img class="auto-img" src="" alt="" />
              </div>
              <div class="ytitle">开卡</div>
            </div>
            <div class="chang">{{ item.showTimes }}</div>
          </div>
          <div v-show="!isHas">
            <van-empty description="暂无该影片的影院信息！" />
          </div>
          
        </div>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Shop",
  components: {
    Navi,
  },
  data() {
    return {
      movie: [],
      cityid: "",
      id: "",
      date: [],
      date1: [],
      district: [],
      dian: [],
      labels: [],
      limit: "",
      isHas: true,
      shu: 20,

      value: "-1",
      value1: -1,

      time: "",
      active: 0,
    };
  },
  created() {
    this.id = this.$route.params.id;

    this.getData(this.id);

    let loc = (localStorage.getItem("data") || "[]");
    console.log(loc);

    let localData = localStorage.getItem("data").slice(1, -1).split(",");
    if (localData[localData.length - 2].length === 10) {
      this.cityid = localData[localData.length - 2].slice(6).split('"')[1];
    } else if (localData[localData.length - 2].length === 8) {
      this.cityid = localData[localData.length - 2].slice(-2);
    } else {
      this.cityid = localData[localData.length - 2].slice(-1);
    }
    
    console.log(this.id, this.cityid);
    this.getdate(this.id, this.cityid);
    this.getXuan(this.id, this.cityid, this.date1[this.active]);
  },
  methods: {
    getData(id) {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/maoyan/movie/intro?movieId=" + id,
      })
        .then((result) => {
          this.movie = result.data.data.movie;

          this.movie.sc = this.movie.sc.toFixed(1);
        })
        .catch((err) => {});
    },

    getdate(id, cityid) {
      console.log(id,cityid);
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/maoyan/movie/showdays?movieId=" +
          id +
          "&cityId=" +
          cityid,
      })
        .then((result) => {
          if (result.data.data === null) {
            this.isHas = false;
          } else {
            this.isHas = true;
            result.data.data.dates.forEach((v) => {
              console.log(v.date);
              if (v.date) {
                this.date1.push(v.date);
                this.date.push(v.date);
              }
            });

            this.getOne(
              this.id,
              this.cityid,
              this.value1,
              this.date1[this.active]
            );
          }
            
        })
        .catch((err) => {});
    },
    getXuan(id, cityid, time) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/maoyan/movie/select/items?movieid=" +
          id +
          "&cityId=" +
          cityid +
          "&showDate=" +
          time,
      })
        .then((result) => {
          result.data.data.district.subItems = JSON.parse(
            JSON.stringify(result.data.data.district.subItems).replace(
              /name/g,
              "text"
            )
          );
          result.data.data.district.subItems = JSON.parse(
            JSON.stringify(result.data.data.district.subItems).replace(
              /id/g,
              "value"
            )
          );
          result.data.data.district.subItems.forEach((v) => {
            v.text = v.text ;
          });

          this.district = result.data.data.district.subItems;
        })
        .catch((err) => {});
    },

    getOne(id, cityid, disid, time) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/maoyan/movie/select/cinemas?limit=20&offset=0&client=iphone&channelId=4&showDate=" +
          time +
          "&movieId=" +
          id +
          "&sort=distance&cityId=" +
          cityid +
          "&districtId=" +
          disid +
          "&lineId=-1&areaId=-1&stationId=-1",
      })
        .then((result) => {
          this.$toast("加载成功！");
          console.log(result.data.data);

          this.limit = result.data.data.paging.limit;
          if (this.limit === 0) {
            this.isHas = false;
          } else {
            this.isHas = true;
          }
          this.dian = [];

          result.data.data.cinemas.forEach((v) => {
            this.dian.push(v);
            this.labels.push(v.labels.slice(0, 3));
          });
          //
        })
        .catch((err) => {});
    },
    getID() {
      this.getOne(this.id, this.cityid, this.value1, this.date1[this.active]);
    },
    chan(a, b) {
      console.log(a,b);
      let updata = "2022-" + b.slice(0, 2) + "-" + b.slice(3, 5);

      console.log(this.id, this.cityid, this.value1, updata);

      this.getOne(this.id, this.cityid, this.value1, updata);
    },
    goCinema(id, cityid, addr, title, time) {
      this.$router.push({
        name: "Cinema",
        params: { id, cityid, addr, title, time },
      });
    },
    goDetails(id, type) {
      this.$router.push({ name: "Details", params: { id, type } });
    },
    like() {
      let like = document.getElementsByClassName("like");
      let loc = JSON.parse(localStorage.getItem("token") || "[]");

      if (loc.length === 0) {
        this.$toast("请先登录,跳转中...");
        setTimeout(() => {
          this.$router.push({ name: "Login" });
        }, 2000);
        return;
      } else {
        if (like[0].childNodes[0].className.split(" ")[1] == "van-icon-like") {
          like[0].childNodes[0].classList.add("van-icon-like-o");
          like[0].childNodes[0].classList.remove("van-icon-like");
          localStorage.removeItem("data2");
          this.$toast("已取消想看");
        } else {
          like[0].childNodes[0].classList.add("van-icon-like");
          like[0].childNodes[0].classList.remove("van-icon-like-o");

          // //获取本地存储的聊天记录
          let localData = localStorage.getItem("data2");

          if (!localData) {
            localData = [];
          } else {
            localData = JSON.parse(localData);
          }
          let addList = {
            movie: this.movie,
          };
          localData.push(addList);
          localStorage.setItem("data2", JSON.stringify(localData));
          this.$toast("已加入想看");
        }
      }
    },
    star() {
      let star = document.getElementsByClassName("star");
      let loc = JSON.parse(localStorage.getItem("token") || "[]");

      if (loc.length === 0) {
        this.$toast("请先登录,跳转中...");
        setTimeout(() => {
          this.$router.push({ name: "Login" });
        }, 2000);
        return;
      } else {
        if (star[0].childNodes[0].className.split(" ")[1] == "van-icon-star") {
          star[0].childNodes[0].classList.add("van-icon-star-o");
          star[0].childNodes[0].classList.remove("van-icon-star");
          localStorage.removeItem("data3");
          this.$toast("已取消看过");
        } else {
          star[0].childNodes[0].classList.add("van-icon-star");
          star[0].childNodes[0].classList.remove("van-icon-star-o");

          // //获取本地存储的聊天记录
          let localData = localStorage.getItem("data3");

          if (!localData) {
            localData = [];
          } else {
            localData = JSON.parse(localData);
          }
          let addList = {
            movie: this.movie,
          };
          localData.push(addList);
          localStorage.setItem("data3", JSON.stringify(localData));
          this.$toast("已加入看过");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  .play {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 110px;
    right: 20px;
  }
  .btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    .like,
    .star {
      width: 160px;
      height: 30px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 5px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      font-size: 14px;
      margin-top: 10px;
    }
  }
}
.tbox {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .timg {
    width: 105px;
    border-radius: 10px;
    overflow: hidden;
    .himg {
      height: 160px;
    }
  }
  .nmbox {
    width: 230px;
    .nm {
      font-size: 23px;
      margin-bottom: 5px;
      color: #fff;
    }
    .enm {
      font-size: 13px;
      margin-bottom: 15px;
      color: #ddd;
    }
    .cat {
      font-size: 13px;
      margin-bottom: 5px;
      color: #ddd;
    }
    .desc {
      font-size: 13px;
      margin-bottom: 5px;
      color: #ddd;
    }
    .fbox {
      display: flex;
      margin-bottom: 5px;
      .fen {
        font-size: 18px;
        color: #faaf00;
        line-height: 25px;
        margin-right: 5px;
      }
      .ren {
        font-size: 12px;
        color: #ddd;
        line-height: 25px;
      }
    }
    .pubdesc {
      font-size: 12px;
      color: #ddd;
      margin-bottom: 10px;
    }
  }
}

/deep/.van-tab {
  font-size: 15px;
}
/deep/.van-dropdown-menu__bar {
  background-color: #fffbfb;
}
.film {
  background-color: #fffdfd;
  margin-bottom: 55px;
}
.list {
  width: 100%;

  .hostbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
    .hostLeft {
      width: 80%;
      display: flex;
      .himg {
        width: 75px;
        border-radius: 10px;
        overflow: hidden;
      }
      .textbox {
        width: 190px;
        margin-left: 8px;
        .htitle {
          font-size: 18px;
          margin-bottom: 7px;
        }
        .hsum,
        .hren {
          font-size: 13px;
          color: #999;
          margin-bottom: 7px;
        }
      }
    }
    .hostRight {
      width: 70px;
      align-items: center;
      padding-top: 50px;
      padding-left: 13px;
      box-sizing: border-box;
    }
    /deep/.van-button--small {
      padding: 0 15px;
    }
  }
  .hostbox:last-child {
    border: 0;
  }

  .navbox {
    width: 100%;
  }
  .xuan {
    width: 100%;
    height: 290px;
    overflow: scroll;
    margin-bottom: 10px;
    .item {
      width: 96%;
      margin: 0 auto;
      border-bottom: 2px solid rgb(239, 237, 237);
      padding: 15px 0;
      .tbox {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .title {
          width: 300px;
          font-size: 18px;
          // font-weight: bold;
        }
        .tsum {
          width: 80px;
          font-size: 18px;
          color: #fa2900;
          text-align: center;
        }
        .yuan {
          font-size: 14px;
        }
        .qi {
          font-size: 14px;
          color: #666;
        }
      }
      .dbox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        color: #666;
        margin: 5px 0;
        .dtitle {
          width: 300px;
        }
      }
      .zhe {
        font-size: 13px;
        margin: 5px 0;
        width: 90%;
        display: flex;
        .tui {
          padding: 2px 3px;
          text-align: center;
          border-style: solid;
          border-radius: 5px;
          margin-right: 3px;
        }
      }
      .youhui {
        display: flex;
        align-items: center;
        .yimg {
          width: 15px;
          height: 15px;
          margin-right: 3px;
        }
        .ytitle {
          color: #999;
        }
      }
      .chang {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
      }
    }
  }
}
</style>